<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
背景
    background 	          简写属性，作用是将背景属性设置在一个声明中。
    background-color 	设置元素的背景颜色。
    background-image 	把图像设置为背景。
    background-repeat 	设置背景图像是否及如何重复。
    background-attachment 	背景图像是否固定或者随着页面的其余部分滚动。
    background-position 	设置背景图像的起始位置。

文本
    color 	设置文本颜色
    direction 	设置文本方向。
    letter-spacing 	设置字符间距
    line-height 	设置行高
    text-align 	对齐元素中的文本
    text-decoration 	向文本添加修饰
    text-indent 	缩进元素中文本的首行
    text-shadow 	设置文本阴影
    text-transform 	控制元素中的字母
    unicode-bidi 	设置或返回文本是否被重写
    vertical-align 	设置元素的垂直对齐
    white-space 	设置元素中空白的处理方式
    word-spacing 	设置字间距

字体
    font 	在一个声明中设置所有的字体属性
    font-family 	指定文本的字体系列
    font-size 	指定文本的字体大小
    font-style 	指定文本的字体样式
    font-variant 	以小型大写字体或者正常字体显示文本。
    font-weight 	指定字体的粗细。

链接
    a:link - 正常，未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover - 当用户鼠标放在链接上时
    a:active - 链接被点击的那一刻
列表
    list-style: square url("sqpurple.gif"); 	简写属性。用于把所有用于列表的属性设置于一个声明中
    list-style-type 	设置列表项标志的类型。
    list-style-position 	设置列表中列表项标志的位置。
    list-style-image 	将图象设置为列表项标志。

表格
    border-collapse: collapse;  /*显示一个表的单个边框，使用 border-collapse属性,设置表格的边框是否被折叠成一个单一的边框或隔开*/
    border:1px solid black;     /*表格边框 th/ td元素有独立的边界*/
    width:100%;                 /*宽度*/
    height:90px;                /*高度*/
    background-color:green;     /*th元素的背景颜色：*/
    color:white;                /*th元素的文本颜色：*/
    text-align:right;           /*text-align属性设置水平对齐方式，像左，右，或中心：*/
    vertical-align:bottom;      /*垂直对齐属性设置垂直对齐，比如顶部，底部或中间：*/
    padding:15px;               /*如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：*/
    caption {caption-side:bottom;}  /*表格标题，注意:如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 */
边框
    border 	简写属性，用于把针对四个边的属性设置在一个声明。
            border:5px solid red;   border-width   border-style (required)   border-color
    border-style 	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
            border-style:dotted solid double dashed; 上边框是 dotted右边框是 solid底边框是 double左边框是 dashed
            border-style:dotted solid double;   上边框是 dotted左、右边框是 solid底边框是 double
            border-style:dotted solid;     上、底边框是 dotted右、左边框是 solid
            border-style:dotted; 四面边框是 dotted
    border-width 	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
    border-color 	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
            border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
    border-bottom 	简写属性，用于把下边框的所有属性设置到一个声明中。
    border-bottom-color 	设置元素的下边框的颜色。
    border-bottom-style 	设置元素的下边框的样式。
    border-bottom-width 	设置元素的下边框的宽度。
    border-left 	简写属性，用于把左边框的所有属性设置到一个声明中。
    border-left-color 	设置元素的左边框的颜色。
    border-left-style 	设置元素的左边框的样式。
    border-left-width 	设置元素的左边框的宽度。
    border-right 	简写属性，用于把右边框的所有属性设置到一个声明中。
    border-right-color 	设置元素的右边框的颜色。
    border-right-style 	设置元素的右边框的样式。
    border-right-width 	设置元素的右边框的宽度。
    border-top 	简写属性，用于把上边框的所有属性设置到一个声明中。
                border-top:thick double #ff0000;
    border-top-color 	设置元素的上边框的颜色。
    border-top-style 	设置元素的上边框的样式。
    border-top-width 	设置元素的上边框的宽度。
轮廓（outline）
    outline 	在一个声明中设置所有的轮廓属性 	outline-color  outline-style  outline-width  inherit
    outline-color 	设置轮廓的颜色  color-name
                                    hex-number
                                    rgb-number
                                    invert
                                    inherit
    outline-style 	设置轮廓的样式 	none
                                    dotted
                                    dashed
                                    solid
                                    double
                                    groove
                                    ridge
                                    inset
                                    outset
                                    inherit
    outline-width 	设置轮廓的宽度 	thin
                                    medium
                                    thick
                                    length
                                    inherit
外边距
    margin 	简写属性。在一个声明中设置所有外边距属性。
    margin-bottom 	设置元素的下外边距。
    margin-left 	设置元素的左外边距。
    margin-right 	设置元素的右外边距。
    margin-top 	设置元素的上外边距。
Padding（填充）
    padding 	使用缩写属性设置在一个声明中的所有填充属性
    padding-bottom 	设置元素的底部填充
    padding-left 	设置元素的左部填充
    padding-right 	设置元素的右部填充
    padding-top 	设置元素的顶部填充

尺寸 (Dimension)属性
    height 	设置元素的高度。
    line-height 	设置行高。
    max-height 	设置元素的最大高度。
    max-width 	设置元素的最大宽度。
    min-height 	设置元素的最小高度。
    min-width 	设置元素的最小宽度。
    width 	设置元素的宽度。

Display(显示) 与 Visibility（可见性）
    display:none
    visibility:hidden
定位类型。
    position 指定元素的定位类型：
            static
            relative
            fixed
            absolute
            inherit
    clip 	剪辑一个绝对定位的元素
            shape
            auto
            inherit
    cursor 	显示光标移动到指定的类型
            url
            auto
            crosshair
            default
            pointer
            move
            e-resize
            ne-resize
            nw-resize
            n-resize
            se-resize
            sw-resize
            s-resize
            w-resize
            text
            wait
            help
    left 	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
            auto
            length
            %
            inherit
    bottom 	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
            auto
            length
            %
            inherit
    right 	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
            auto
            length
            %
            inherit
    top 	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
            auto
            length
            %
            inherit
    overflow 设置当元素的内容溢出其区域时发生的事情。
            auto
            hidden
            scroll
            visible
            inherit
    overflow-y  指定如何处理顶部/底部边缘的内容溢出元素的内容区域
            auto
            hidden
            scroll
            visible
            no-display
            no-content
    overflow-x  指定如何处理右边/左边边缘的内容溢出元素的内容区域
            auto
            hidden
            scroll
            visible
            no-display
            no-content
    z-index 	设置元素的堆叠顺序
            number
            auto
            inherit

浮动属性
    clear 	指定不允许元素周围有浮动元素。
        left
        right
        both
        none
        inherit
    float 	指定一个盒子（元素）是否可以浮动。
        left
        right
        none
        inherit

对齐
    margin: auto        元素居中对齐
    text-align: center  文本居中对齐
    position: absolute; 左右对齐 - 使用定位方式
    float: right;       左右对齐 - 使用 float 方式
    padding: 70px 0;    垂直居中对齐
    line-height         垂直居中

分组 选择器：具有相同样式的元素。
    h1,h2,p{
        color:green;
    }
嵌套 选择器：为所有class="marked"元素内的p元素指定一个样式
    .marked p{
        color:white;
    }
组合选择符：
    后代选取器(以空格分隔)：后代选取器匹配所有值得元素的后代元素。
        选取所有div元素中的p元素。
        div p{
            background-color:yellow;
        }
    子元素选择器(以大于号分隔）（Child selectors）只能选择作为某元素子元素的元素
        选择了div元素中所有直接子元素 p
        div>p{
            background-color:yellow;
        }
    相邻兄弟选择器（以加号分隔）:可选择紧接在另一元素后的元素，且二者有相同父元素
        所有位于div元素后的第一个p元素:
        div+p{
            background-color:yellow;
        }
    普通兄弟选择器（以破折号分隔）选取所有指定元素之后的相邻兄弟元素。
        选取了所有 div 元素之后的所有相邻兄弟元素 p :
        div~p{
            background-color:yellow;
        }
伪类(Pseudo-classes)CSS伪类是用来添加一些选择器的特殊效果。注意：伪类的名称不区分大小写。
    语法
        伪类的语法：            selector:pseudo-class {property:value;}
        CSS类也可以使用伪类：   selector.class:pseudo-class {property:value;}
    anchor伪类
        a:link {color:#FF0000;} /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已访问的链接 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接 */
        a:active {color:#0000FF;} /* 已选中的链接 */
    伪类可以与 CSS 类配合使用
        a.red:visited {color:#FF0000;}
        <a class="red" href="css-syntax.html">CSS 语法</a>
    :first - child伪类   选择元素的第一个子元素
        匹配第一个 p 元素
        p:first-child{
            color:blue;
        }
        匹配所有p 元素中的第一个 i 元素
        p > i:first-child{
            color:blue;
        }
        择器匹配所有作为元素的第一个子元素的 p 元素中的所有 i 元素：
        p:first-child i{
            color:blue;
        }
    :lang 伪类使你有能力为不同的语言定义特殊的规则注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。
        在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：
        q:lang(no) {quotes: "~" "~";}
        <q lang="no">A quote in a paragraph</q>
    :focus  注意:仅当 !DOCTYPE 已经声明时 IE8 支持 :focus.
        input:focus{
            background-color:yellow;
        }
    所有CSS伪类/元素
        :checked 	input:checked 	选择所有选中的表单元素
        :disabled 	input:disabled 	选择所有禁用的表单元素
        :empty 	    p:empty 	选择所有没有子元素的p元素
        :enabled 	input:enabled 	选择所有启用的表单元素
        :first-of-type 	p:first-of-type 	选择每个父元素是p元素的第一个p子元素
        :in-range 	input:in-range 	选择元素指定范围内的值
        :invalid 	input:invalid 	选择所有无效的元素
        :last-child 	p:last-child 	选择所有p元素的最后一个子元素
        :last-of-type 	p:last-of-type 	选择每个p元素是其母元素的最后一个p元素
        :not(selector) 	:not(p) 	选择所有p以外的元素
        :nth-child(n) 	p:nth-child(2) 	选择所有p元素的第二个子元素
        :nth-last-child(n) 	p:nth-last-child(2) 	选择所有p元素倒数的第二个子元素
        :nth-last-of-type(n) 	p:nth-last-of-type(2) 	选择所有p元素倒数的第二个为p的子元素
        :nth-of-type(n) 	p:nth-of-type(2) 	选择所有p元素第二个为p的子元素
        :only-of-type 	p:only-of-type 	选择所有仅有一个子元素为p的元素
        :only-child 	p:only-child 	选择所有仅有一个子元素的p元素
        :optional 	input:optional 	选择没有"required"的元素属性
        :out-of-range 	input:out-of-range 	选择指定范围以外的值的元素属性
        :read-only 	input:read-only 	选择只读属性的元素属性
        :read-write 	input:read-write 	选择没有只读属性的元素属性
        :required 	input:required 	选择有"required"属性指定的元素属性
        :root 	root 	选择文档的根元素
        :target 	#news:target 	选择当前活动#news元素(点击URL包含锚的名字)
        :valid 	input:valid 	选择所有有效值的属性
        :link 	a:link 	选择所有未访问链接
        :visited 	a:visited 	选择所有访问过的链接
        :active 	a:active 	选择正在活动链接
        :hover 	a:hover 	把鼠标放在链接上的状态
        :focus 	input:focus 	选择元素输入后具有焦点
        :first-letter 	p:first-letter 	选择每个p 元素的第一个字母
        :first-line 	p:first-line 	选择每个p 元素的第一行
        :first-child 	p:first-child 	选择器匹配属于任意元素的第一个子元素的 p 元素
        :before 	p:before 	在每个p元素之前插入内容
        :after 	p:after 	在每个p元素之后插入内容
        :lang(language) 	p:lang(it) 	为p元素的lang属性选择一个开始值

CSS伪元素是用来添加一些选择器的特殊效果。
    语法
        伪元素的语法：selector:pseudo-element {property:value;}
        CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}
    :first-line 伪元素  用于向文本的首行设置特殊样式。注意："first-line" 伪元素只能用于块级元素。
        注意： 下面的属性可应用于 "first-line" 伪元素：
            font
            color
            background
            word-spacing
            letter-spacing
            text-decoration
            vertical-align
            text-transform
            line-height
            clear
    :first-letter 伪元素  "first-letter" 伪元素用于向文本的首字母设置特殊样式：
        注意： "first-letter" 伪元素只能用于块级元素。
        注意： 下面的属性可应用于 "first-letter" 伪元素：
            font properties
            color properties
            background properties
            margin properties
            padding properties
            border properties
            text-decoration
            vertical-align (only if "float" is "none")
            text-transform
            line-height
            float
            clear
    :before 伪元素   可以在元素的内容前面插入新内容。
所有CSS伪类/元素
    :link 	a:link 	选择所有未访问链接
    :visited 	a:visited 	选择所有访问过的链接
    :active 	a:active 	选择正在活动链接
    :hover 	a:hover 	把鼠标放在链接上的状态
    :focus 	input:focus 	选择元素输入后具有焦点
    :first-letter 	p:first-letter 	选择每个p 元素的第一个字母
    :first-line 	p:first-line 	选择每个p 元素的第一行
    :first-child 	p:first-child 	选择器匹配属于任意元素的第一个子元素的 p 元素
    :before 	p:before 	在每个p元素之前插入内容
    :after 	p:after 	在每个p元素之后插入内容
    :lang(language) 	p:lang(it) 	为p元素的lang属性选择一个开始值

    伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。
    由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
    由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

    与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。
    实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。
    它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

属性选择器
    [title] {
        color:blue;
    }

属性和值选择器
    [title=runoob]{
        border:5px solid green;
    }
属性和值的选择器 - 多值
    包含  [title~=hello] { color:red; }
          [lang|=en]{ color:blue;}

媒体类型   注意：媒体类型名称不区分大小写。
        媒体类型 	描述
        all 	用于所有的媒体设备。
        aural 	用于语音和音频合成器。
        braille 	用于盲人用点字法触觉回馈设备。
        embossed 	用于分页的盲人用点字法打印机。
        handheld 	用于小的手持的设备。
        print 	用于打印机。
        projection 	用于方案展示，比如幻灯片。
        screen 	    用于电脑显示器。
        tty 	   用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
        tv 	     用于电视机类型的设备。



</body>
</html>